<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
        }
        .draggable {
            width: 100%;
            height: 250px;
            background-color: red;
            cursor: move;
            position: absolute;
            bottom: 0px;
            /*将鼠标指针变为可移动形状*/

        }
        .itext{
            width: 100%;
            height: 30px;
        }
        i{
            /* text-align: end; */
            /* margin-right: 20px; */
            /* display: block; */
            position: absolute;
            right: 0;
            top: 0;
            /* border: 1px solid black; */
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div class="blockOn"><button onclick="blockFunction()">点击弹窗</button></div>
    <div class="box">
        <p class="itext"></p>
        <i onclick="noneFunction()">X</i>
        <div class="draggable"></div>
    </div>
</body>

</html>
<script>
    const draggableElement = document.querySelector('.draggable');
    const boxElement = document.querySelector('.box');
    var oId = document.querySelector('p')
    let offsetX, offsetY;

    //给p标签绑定鼠标按下事件，使元素拖动移动
    oId.addEventListener('mousedown', startDragging,true);

    function startDragging(event) {
        offsetX = event.clientX - boxElement.offsetLeft;
        offsetY = event.clientY - boxElement.offsetTop;

        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDragging);
        console.log('',this);
    }

    function stopDragging() {
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDragging);
    }

    function drag(event) {

        let left = event.clientX - offsetX;
        let top = event.clientY - offsetY;

        // 限制拖拽范围

        let maxX = window.innerWidth - boxElement.offsetWidth;
        let maxY = window.innerHeight - boxElement.offsetHeight;
        left = Math.min(Math.max(0, left), maxX);
        top = Math.min(Math.max(0, top), maxY);

        boxElement.style.left = left + 'px';
        boxElement.style.top = top + 'px';

    }

    function noneFunction(){
        boxElement.style.display = 'none'
    }
    function blockFunction(){
        boxElement.style.display = 'block'
    }
</script>